<template>
  <div class="auth">
    <div class="background-img"></div>
    <div class="title-wrapper">
      <img alt="logo"
           src="https://ncstatic.clewm.net/rsrc/2020/1016/02/4757e4910cb527fc040d019a93ded74f.png?x-oss-process=image/resize,w_750/format,gif/sharpen,100/quality,Q_80/interlace,1/auto-orient,1">
      <h2 class="title">图书库存管理系统</h2>
    </div>
    <div class="form">
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="登录">
          <div class="item">
            <a-input v-model:value="loginForm.account" placeholder="账号" size="large">
              <template #prefix>
                <user-outlined type="user"/>
              </template>
            </a-input>
          </div>
          <div class="item">
            <a-input-password v-model:value="loginForm.password" placeholder="密码" size="large">
              <template #prefix>
                <LockOutlined type="password"/>
              </template>
            </a-input-password>
          </div>
          <div class="item">
            <a href="javascript:" @click="handleForget">忘记密码</a>
          </div>
          <div class="item">
            <a-button size="large" type="primary" @click="handleLogin">登录</a-button>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="注册">
          <div class="item">
            <a-input v-model:value="regForm.account" placeholder="账号" size="large">
              <template #prefix>
                <user-outlined type="user"/>
              </template>
            </a-input>
          </div>
          <div class="item">
            <a-input-password v-model:value="regForm.password" placeholder="请输入密码" size="large">
              <template #prefix>
                <LockOutlined type="password"/>
              </template>
            </a-input-password>
          </div>
          <div class="item">
            <a-input-password v-model:value="regForm.checkPass" placeholder="请再次输入密码" size="large">
              <template #prefix>
                <LockOutlined type="password"/>
              </template>
            </a-input-password>
          </div>
          <div class="item">
            <a-input v-model:value="regForm.inviteCode" placeholder="邀请码" size="large">
              <template #prefix>
                <MailOutlined/>
              </template>
            </a-input>
          </div>
          <div class="item">
            <a-button size="large" type="primary" @click="handleRegister">注册</a-button>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
    <a-modal v-model:visible="visible" title="向管理员提交申请" @ok="handleOk">
      <a-form :model="formState">
        <a-form-item :label-col="{span:5}" label="账户名">
          <a-input v-model:value="formState.account" style="width: 300px;"/>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { Button, Form, Input, message, Modal, Tabs } from 'ant-design-vue'
import { reactive, ref } from 'vue'
import { LockOutlined, MailOutlined, UserOutlined } from '@ant-design/icons-vue'
import * as auth from '../../api/login'
import { useRouter } from 'vue-router'
import store from '@/store'
import { getRoleById } from '@/utils'
import { setToken } from '@/utils/token'
import { createForgetRequest } from '@/api/forgetPassword'

export default {
  name: 'login',
  setup () {
    const activeKey = ref('1')
    const formState = reactive({
      account: '',
    })
    const visible = ref(false)
    const router = useRouter()
    const regForm = reactive({
      account: '',
      password: '',
      checkPass: '',
      // inviteCode: '',
    })

    const handleRegister = async () => {
      if (regForm.account === '') {
        message.warning('用户名不能为空')
        return
      }
      if (regForm.password === '') {
        message.warning('请输入密码')
        return
      }
      if (regForm.password !== regForm.checkPass) {
        message.warning('两次密码不一致')
        return
      }
      // if (regForm.inviteCode === '') {
      //   message.warning('邀请码不能为空')
      //   return
      // }
      await auth.register(regForm.account, regForm.password)
                .then(res => {
                  message.success(res.msg)
                  activeKey.value = '1'
                })
    }

    const loginForm = reactive({
      account: '',
      password: '',
    })

    const handleLogin = async () => {
      if (loginForm.account === '') {
        message.warning('用户名不能为空')
        return
      }
      if (loginForm.password === '') {
        message.warning('请输入密码')
        return
      }
      await auth.login(loginForm.account, loginForm.password)
                .then(res => {
                  setToken(res.data.token)
                  store.commit('setUser', res.data.user)
                  store.commit('setRole', getRoleById(res.data.user.roleId))
                  message.success(res.msg)
                  router.replace('/dashboard')
                })
    }

    const handleForget = () => {
      visible.value = true
    }
    const handleOk = async () => {
      await createForgetRequest(formState).then(res => {
        message.success(res.msg)
        visible.value = false
      })
    }

    return {
      activeKey,
      regForm,
      handleRegister,

      loginForm,
      handleLogin,

      visible,
      formState,
      handleOk,
      handleForget,
    }
  },
  components: {
    AButton: Button,
    ATabs: Tabs,
    ATabPane: Tabs.TabPane,
    AInput: Input,
    UserOutlined,
    LockOutlined,
    MailOutlined,
    AModal: Modal,
    AForm: Form,
    AFormItem: Form.Item,
    AInputPassword: Input.Password,
  },
}
</script>

<style lang="scss" scoped>
.auth {
  overflow: hidden;

  .background-img {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    //background-image: url("https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg");
    background-image: url("https://images.unsplash.com/photo-1455325528055-ad815afecebe?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2250&q=80");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .title-wrapper {
    position: relative;
    margin-top: 100px;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      height: 60px;
    }

    .title {
      margin-left: 18px;
    }
  }

  .form {
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 32px;

    .item {
      margin-bottom: 16px;

      button {
        width: 100%;
      }
    }
  }
}
</style>
